<template>
  <div class="p-4 md:p-8">
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
      <div>
        <h1 class="text-2xl md:text-3xl font-bold">{{ recipe.name }}</h1>
        <p class="text-slate-500">{{ recipe.style }}</p>
      </div>
      <div class="mt-4 md:mt-0 flex space-x-3">
        <button 
          class="px-4 py-2 border border-slate-300 rounded-md hover:bg-slate-100 transition flex items-center"
          @click="editRecipe"
        >
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
            <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
          </svg>
          编辑
        </button>
        <button 
          class="px-4 py-2 bg-brew-amber text-white rounded-md hover:bg-amber-600 transition flex items-center"
          @click="startBrewing"
        >
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
          </svg>
          开始酿造
        </button>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <!-- 基本信息 -->
      <div class="bg-white rounded-lg shadow-md p-6">
        <h2 class="text-lg font-semibold mb-4">基本信息</h2>
        <div class="space-y-4">
          <div>
            <span class="text-slate-500">酒精度</span>
            <p class="font-medium">{{ recipe.abv }}%</p>
          </div>
          <div>
            <span class="text-slate-500">苦度</span>
            <p class="font-medium">{{ recipe.ibu }}</p>
          </div>
          <div>
            <span class="text-slate-500">色度</span>
            <p class="font-medium">{{ recipe.srm }}</p>
          </div>
          <div>
            <span class="text-slate-500">创建日期</span>
            <p class="font-medium">{{ formatDate(recipe.createdAt) }}</p>
          </div>
        </div>
      </div>

      <!-- 配方描述 -->
      <div class="bg-white rounded-lg shadow-md p-6 md:col-span-2">
        <h2 class="text-lg font-semibold mb-4">配方描述</h2>
        <p class="text-slate-600">{{ recipe.description }}</p>
      </div>

      <!-- 原料 -->
      <div class="bg-white rounded-lg shadow-md p-6 md:col-span-3">
        <h2 class="text-lg font-semibold mb-4">原料</h2>
        <div class="space-y-6">
          <!-- 麦芽 -->
          <div>
            <h3 class="font-medium mb-2">麦芽</h3>
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                  <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">名称</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数量</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">色度</th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                  <tr v-for="(malt, index) in recipe.malts" :key="index">
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ malt.name }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ malt.amount }} kg</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ malt.color }} EBC</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <!-- 啤酒花 -->
          <div>
            <h3 class="font-medium mb-2">啤酒花</h3>
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                  <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">名称</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数量</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">添加时间</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">α酸</th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                  <tr v-for="(hop, index) in recipe.hops" :key="index">
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ hop.name }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ hop.amount }} g</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ hop.time }} 分钟</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ hop.alpha }}%</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <!-- 酵母 -->
          <div>
            <h3 class="font-medium mb-2">酵母</h3>
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                  <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">名称</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数量</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">发酵温度</th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                  <tr v-for="(yeast, index) in recipe.yeasts" :key="index">
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ yeast.name }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ yeast.amount }} g</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ yeast.temperature }}°C</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <!-- 酿造步骤 -->
      <div class="bg-white rounded-lg shadow-md p-6 md:col-span-3">
        <h2 class="text-lg font-semibold mb-4">酿造步骤</h2>
        <div class="space-y-4">
          <div v-for="(step, index) in recipe.steps" :key="index" class="flex items-start">
            <div class="flex-shrink-0 w-8 h-8 rounded-full bg-brew-amber flex items-center justify-center text-white font-medium">
              {{ index + 1 }}
            </div>
            <div class="ml-4">
              <h3 class="font-medium">{{ step.title }}</h3>
              <p class="text-slate-600 mt-1">{{ step.description }}</p>
              <p v-if="step.duration" class="text-slate-500 text-sm mt-1">
                时长: {{ step.duration }} 分钟
              </p>
              <p v-if="step.temperature" class="text-slate-500 text-sm mt-1">
                温度: {{ step.temperature }}°C
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Edit Recipe Modal -->
  <div v-if="showEditModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-3xl max-h-[90vh] overflow-y-auto">
      <div class="p-6 border-b">
        <h2 class="text-xl font-semibold">Edit Recipe</h2>
      </div>
      
      <div class="p-6">
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Recipe Name</label>
            <input 
              type="text" 
              v-model="editingRecipe.name"
              class="p-2 w-full border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brew-amber focus:border-transparent"
              placeholder="Enter recipe name"
            />
          </div>
          
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Style</label>
            <select 
              v-model="editingRecipe.style"
              class="p-2 w-full border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brew-amber focus:border-transparent"
            >
              <option v-for="style in beerStyles" :key="style" :value="style">{{ style }}</option>
            </select>
          </div>
          
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-1">ABV (%)</label>
              <input 
                type="number" 
                v-model="editingRecipe.abv"
                step="0.1"
                min="0"
                class="p-2 w-full border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brew-amber focus:border-transparent"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-1">IBU</label>
              <input 
                type="number" 
                v-model="editingRecipe.ibu"
                step="1"
                min="0"
                class="p-2 w-full border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brew-amber focus:border-transparent"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-1">SRM</label>
              <input 
                type="number" 
                v-model="editingRecipe.srm"
                step="1"
                min="0"
                class="p-2 w-full border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brew-amber focus:border-transparent"
              />
            </div>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Description</label>
            <textarea 
              v-model="editingRecipe.description"
              class="p-2 w-full border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brew-amber focus:border-transparent"
              rows="3"
              placeholder="Brief description of your recipe"
            ></textarea>
          </div>
          
          <!-- More complex editing fields would go here in a real app -->
        </div>
      </div>
      
      <div class="p-6 border-t bg-slate-50 flex justify-end space-x-3">
        <button 
          class="px-4 py-2 border border-slate-300 rounded-md hover:bg-slate-100 transition"
          @click="showEditModal = false"
        >
          Cancel
        </button>
        <button 
          class="px-4 py-2 bg-brew-amber text-white rounded-md hover:bg-amber-600 transition disabled:opacity-50"
          :disabled="!editingRecipe.name || !editingRecipe.style"
          @click="updateRecipe"
        >
          Update Recipe
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const recipeId = route.params.id;

// Style color mapping from RecipesView
const styleColorMap = {
  'American Pale Ale': 'bg-amber-500',
  'American IPA': 'bg-amber-600',
  'New England IPA': 'bg-yellow-300',
  'Stout': 'bg-slate-900',
  'Porter': 'bg-slate-800',
  'Witbier': 'bg-yellow-100',
  'Hefeweizen': 'bg-yellow-200',
  'Pilsner': 'bg-yellow-400',
  'Lager': 'bg-yellow-500',
  'Saison': 'bg-orange-300',
  'Belgian Tripel': 'bg-amber-300',
  'Irish Red Ale': 'bg-red-600',
  'Scottish Ale': 'bg-red-800',
  'Brown Ale': 'bg-amber-800',
  'Barleywine': 'bg-amber-900',
};

const beerStyles = [
  'American Pale Ale',
  'American IPA',
  'New England IPA',
  'Stout',
  'Porter',
  'Witbier',
  'Hefeweizen',
  'Pilsner',
  'Lager',
  'Saison',
  'Belgian Tripel',
  'Irish Red Ale',
  'Scottish Ale',
  'Brown Ale',
  'Barleywine',
];

// State
const recipe = ref({
  id: recipeId,
  name: 'Classic American Pale Ale',
  style: 'American Pale Ale',
  abv: 5.5,
  ibu: 40,
  srm: 8,
  description: 'A clean, refreshing pale ale with a nice balance of malt and hops. Cascade hops provide a signature citrus and floral aroma.',
  createdAt: '2023-04-15',
  batchSize: 5,
  expectedOG: '1.052',
  expectedFG: '1.012',
  boilTime: 60,
  fermentation: 'Primary: 14 days at 68°F',
  carbonation: 'Force carbonate to 2.4 volumes of CO2',
  notes: 'This recipe works best with water adjusted to enhance hop character. Consider adding gypsum to increase sulfate levels.',
  malts: [
    { name: 'American 2-row Pale Malt', amount: 9, unit: 'lbs', type: 'Base Grain' },
    { name: 'Crystal 40L', amount: 1, unit: 'lb', type: 'Specialty Grain' },
    { name: 'Carapils', amount: 0.5, unit: 'lb', type: 'Specialty Grain' },
  ],
  hops: [
    { name: 'Cascade', amount: 1, unit: 'oz', timing: '60', purpose: 'Bittering' },
    { name: 'Cascade', amount: 1, unit: 'oz', timing: '15', purpose: 'Flavor' },
    { name: 'Cascade', amount: 1, unit: 'oz', timing: '0', purpose: 'Aroma' },
    { name: 'Cascade', amount: 1, unit: 'oz', timing: 'Dry Hop', purpose: 'Aroma' },
  ],
  yeasts: [
    { name: 'Safale US-05 American Ale', amount: 11, type: 'Dry Ale Yeast' },
  ],
  others: [
    { amount: 1, unit: 'tablet', name: 'Whirlfloc', timing: '15 min' },
    { amount: 1, unit: 'tsp', name: 'Yeast Nutrient', timing: '10 min' },
  ],
  mashSteps: [
    { name: 'Mash In', temperature: 152, time: 60 },
    { name: 'Mash Out', temperature: 168, time: 10 },
  ],
  steps: [
    {
      title: 'Mash In',
      description: '将麦芽粉碎后加入糖化锅中，加入热水进行糖化。',
      duration: 60,
      temperature: 67
    },
    {
      title: '洗糟',
      description: '用热水冲洗麦芽，收集所有可发酵糖。',
      duration: 30,
      temperature: 75
    },
    {
      title: '煮沸',
      description: '将麦汁煮沸，分批次添加啤酒花。',
      duration: 60
    },
    {
      title: '冷却',
      description: '将麦汁快速冷却至发酵温度。',
      duration: 30
    },
    {
      title: '发酵',
      description: '将冷却后的麦汁转移至发酵罐，添加酵母开始发酵。',
      duration: 1440,
      temperature: 18
    }
  ]
});

const showEditModal = ref(false);
const editingRecipe = ref({});

onMounted(() => {
  // In a real app, you would fetch the recipe data from your API
  // fetchRecipeDetails(recipeId);
});

const formatDate = (dateString) => {
  if (!dateString) return 'N/A';
  const date = new Date(dateString);
  return new Intl.DateTimeFormat('zh-CN', { 
    year: 'numeric', 
    month: 'short', 
    day: 'numeric' 
  }).format(date);
};

const editRecipe = () => {
  editingRecipe.value = { ...recipe.value };
  showEditModal.value = true;
};

const updateRecipe = () => {
  // In a real app, you would send an API request to update the recipe
  recipe.value = { ...editingRecipe.value };
  showEditModal.value = false;
};

const startBrewing = () => {
  // Navigate to create batch page with recipe pre-selected
  router.push(`/brewing/new?recipe=${recipeId}`);
};
</script> 